<template>
	<view class="ks">
	<text class="back-btn iconfont icon-close" @click="uni.navigateBack({delta:1})"></text>
	<view class="title">考场列表</view>
	<view class="list" v-for="item in testlist">
		 <view class="l1">
		 	 <span class="s1">{{item.title}}</span>
			 <span class="s2">时长{{item.expire}}分钟</span>
		 </view>
		 <view class="l2">
		 	 <p class="p1">题目总数：{{item.question_count}}</p>
			 <p class="p2">总分数：{{item.total_score}}</p>
			 <p class="p3">及格分：{{item.pass_score}}</p>
		 </view>
		 <view class="l3">
		 	  <view class="join" @click="k(item.id)">
		 	  	参加考试
		 	  </view>
		 </view>
	</view>
	</view>
</template>

<script>
	import api from '../../api/api.js'
	export default{
		data(){
			return{
				page:1,
				total:0,
				limit:5,
				testlist:[],
			}
		},
		onLoad(){
			this.getlist()
		},
		methods:{
			k(id){
				uni.showModal({
					title:'是否要开始考试',
					success:(res)=>{
						uni.navigateTo({
							url:'/pages/list/kt?id='+id
						})
					},
					
				})
			},
			async getlist(){
				let res=await api.gettest({page:this.page})
				console.log(res,"test")
				this.testlist=[...this.testlist,...res.data.rows]
				this.total=res.data.count/5
			},
	
		},
		onPullDownRefresh() { //下拉刷新
				this.page = 1
				this.total=0,
				setTimeout(()=>{
					uni.stopPullDownRefresh()
					this.getlist()
				},1000)
			},
			onReachBottom(){
					if(this.page>=this.total){
					uni.showToast({
						title:'到底啦'
					})
				}else{
					this.page++
					this.getlist()
				}
			}
			
			
	}
</script>

<style lang="scss">
	.ks{
		width: 100%;
		height: 100%;
		.title{
			width: 100%; 
            line-height: 130rpx;
			font-size: 40rpx;
			font-weight: 800;
			text-align: center;
			border-bottom: 1rpx solid lightgray;
		}
		.list{
			width: 100%;
			height: 430rpx;
			background-color: white;
			// margin-top: 10rpx;
			border-bottom: 10rpx solid #e5e5e5;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.l1{
				.s1{
					font-size: 40rpx;
					font-weight: 600;
					margin-left: 20rpx;
				}
				.s2{
					font-size: 30rpx;
				margin-right: 20rpx;
				color: red;
				}
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 33.3%;
				// background-color: plum;
				border-bottom: 1rpx solid lightgray;
			}
			.l2{
				p{
					margin-left: 20rpx;
					font-size: 35rpx;
				}
				.p2 ,.p3{
					margin-left: 50rpx;
				}
				display: flex;
				justify-content:flex-start;
				align-items: center;
				width: 100%;
				height: 33.3%;
				// background-color: aquamarine;
				border-bottom: 1rpx solid lightgray;
			}
			.l3{
				.join{
					width: 200rpx;
					height: 90rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
					background-color: #5ccc84;
					text-align: center;
					line-height: 100rpx;
					color: white;
					font-size: 30rpx;
				}
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 100%;
				height: 33.3%;
				// background-color: skyblue;
			}
		}
	}
</style>